<template>
    <!-- 医生-病例管理 -->
    <div class="case-management-box">
        <div class="l-panel">
            <ul class="case-tab">
                <li :class="activeName == item.name ? 'active' : ''" v-for="(item, index) in list" :key="index" @click="tabChange(item.name)">{{item.label}}</li>
            </ul>
            <div>
                <div>
                    <el-form :inline="true" class="demo-form-inline" size="small">
                        <el-form-item v-if="activeName == 'prescriptionTable'" label="用户来源">
                            <el-select v-model="queryList.userType" placeholder="请选择">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="o in $dict.userSourceIds" :key="o.id" :label="o.name" :value="o.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <template v-if="activeName == 'prescriptionTable' || activeName == 'examineFeedback'">
                            <el-form-item label="审核状态">
                                <el-select v-model="queryList.prescriptionState" placeholder="请选择">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="审核通过" value="1"></el-option>
                                    <el-option label="审核驳回" value="2"></el-option>
                                    <el-option label="审核中" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="处方类型">
                                <el-select v-model="queryList.prescriptionType" placeholder="请选择">
                                    <el-option label="全部" value=""></el-option>
                                    <el-option label="中药" value="1"></el-option>
                                    <el-option label="西药" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                        <template v-else>
                            <el-form-item label="联系电话">
                                <el-input v-model="queryList.patientPhone" placeholder="患者电话"></el-input>
                            </el-form-item>
                        </template>
                        <el-form-item label="姓名">
                            <el-input v-model="queryList.patientName" placeholder="患者姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker size="small" v-model="queryList.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onClearQuery">重置</el-button>
                            <el-button type="primary" @click="onQuery">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <component :ref="activeName" :queryList="queryList" :is="activeName"></component>
            </div>
        </div>
    </div>
</template>

<script>
    import checkTable from '../userinquiry/check-table'
    import healthGuidanceTable from '../userinquiry/health-guidance-table'
    import inpatientSuggestTable from '../userinquiry/inpatient-suggest-table'
    import prescriptionTable from '../userinquiry/prescription-table'
    import userCase from './casetable/user-case'
    import examineFeedback from './casetable/examine-feedback'
    import requsetNote from './casetable/request-note'
    export default {
        components: {
            checkTable,
            healthGuidanceTable,
            inpatientSuggestTable,
            prescriptionTable,
            userCase,
            examineFeedback,
            requsetNote
        },
        data() {
            return {
                activeName: "userCase",
                list: [{
                    label: '门诊记录',
                    name: 'userCase'
                }, {
                    label: '处方历史',
                    name: 'prescriptionTable'
                }, {
                    label: '报告意见单',
                    name: 'checkTable'
                }, {
                    label: '检验检查申请单',
                    name: 'requsetNote'
                }, {
                    label: '健康指导建议意见单',
                    name: 'healthGuidanceTable'
                }, {
                    label: '住院建议书',
                    name: 'inpatientSuggestTable'
                }, {
                    label: '药师审方反馈',
                    name: 'examineFeedback'
                }],
                queryList: {
                    userType: '', 
                    patientName: '',
                    patientPhone: '',
                    time: [],
                    prescriptionType: '',
                    prescriptionState: ''
                },
                input: '',
                value: ''
            }
        },
        methods: {
            tabChange(e) {
                this.activeName = e;

                // 切换时，清除搜索数据
                Object.keys(this.queryList).forEach(key => {
                    if (key == 'time') {
                        return this.queryList[key] = [];
                    } else {
                        return this.queryList[key] = '';
                    }
                })
            },
            onClearQuery() {
                Object.keys(this.queryList).forEach(key => {
                    if (key == 'time') {
                        return this.queryList[key] = [];
                    } else {
                        return this.queryList[key] = '';
                    }
                })

                this.onQuery();
            },
            onQuery() {
                //查询
                this.$nextTick(() => {
                    this.$refs[this.activeName].queryData();
                })
            }
        }
    }
</script>

<style lang="scss">
    .case-management-box {
        .l-panel {
            width: 100%;
            padding: 30px;
        }

        /deep/ .el-form-item--small.el-form-item {
            margin-right: 20px;

            /deep/ .el-select {
                width: 110px;
            }
        }

        .case-tab {
            display: flex;
            padding-bottom: 10px;
            flex-wrap: wrap;

            li {
                color: #006db8;
                background: #f1f6fa;
                font-size: 15px;
                line-height: 30px;
                padding: 0 14px;
                border-radius: 16px;
                margin-right: 40px;
                cursor: pointer;
                margin-bottom: 20px;
            }

            .active {
                color: #ffffff;
                background: #006db8;
            }
        }
    }
</style>